<template>
  <div class="subscribe container">
    <h2>订阅(Beta)</h2>
    <p>提供<strong> 每天 早上 七点整</strong> 发送一封邮件，或者去反馈您想要的内容。
      <a-button type="danger"
                shape="round"
                size="small"
                ghost
                @click="()=>{this.$router.push({ path:'/feedback/'})}">反馈</a-button>
    </p>

    <a-form :form="form" @submit="handleSubmit">
      <a-form-item label="订阅类型 | 暂时只开通毒鸡汤和励志语录" >
        <a-select size="large"
                  placeholder="选择类型..."
                  v-decorator="['subscribeType', {
                          rules: [{
                            type: 'string',
                            required: true,
                            message: '请选择一个类型...' }]
                           },]">
          <a-select-option :value="`毒鸡汤`">毒鸡汤</a-select-option>
          <a-select-option :value="`励志名言`">励志名言</a-select-option>
          <a-select-option :value="`新闻资讯`" disabled>新闻资讯</a-select-option>
          <a-select-option :value="`热门电影`" disabled>热门电影</a-select-option>
          <a-select-option :value="`全部订阅`" disabled>全部订阅</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="接收邮箱" has-feedback>
        <a-input
          size="large"
          v-decorator="['email', { rules: [{
              min: 5,
              max: 40,
              type: 'email',
              required: true,
              whitespace: true,
              message: '请输入正确的邮箱地址(5-40)个字符'
            }] }]"
        />
      </a-form-item>
      <a-form-item style="text-align: center">
        <a-button type="primary"
                  html-type="submit"
                  size="large"
                  shape="round"
                  :loading="loading"
                  ghost>订阅</a-button>
      </a-form-item>
    </a-form>

  </div>
</template>

<script>
  import app from "../../app";
  export default {
    name: "subscribe",
    head: ()=>({ title: "订阅 - "+app.name }),
    beforeCreate() {
      this.form = this.$form.createForm(this, { name: "subscribe"})
    },
    data:()=>({
      loading: false,
    }),
    methods: {
      handleSubmit(e){
        e.preventDefault();
        this.loading = true;
        this.form.validateFields((err, values) => {
          if (!err) {
            this.$axios.$post(`${app.api}/api/${app.apiVersion}/subscribe/`, values)
              .then((resp)=>{
                if (resp.code === 200) {
                  this.loading = false;
                  this.$message.success(resp.msg)
                  this.form.resetFields();
                }else {
                  this.loading = false;
                  this.$message.warning(resp.msg)
                }
              }).catch((err)=>{
              this.loading = false;
              this.form.resetFields();
            })
          }else {
            this.loading = false;
          }
        })
      }
    },
    mounted() {
      this.$message.warning("暂未完善...")
    }
  }
</script>

<style scoped>
  .subscribe{
    margin-top: 120px;
    min-height: 60vh;
  }
  strong{
    color: red;
  }
  @media screen and (max-width: 1023px){
    .subscribe{
      margin-top: 70px;
      margin-left: 20px;
      margin-right: 20px;
    }
  }
</style>
